<template>
  <div class="organization-selector" @click="open = true">
    <a-flex :gap="4" align="center" v-if="orgStore.data?.id">
      <team-outlined/>
      <span class="organization-name">{{orgStore.data?.name}}</span>
      <UpDownOutlined class="text-color-gray"/>
    </a-flex>
    <a-flex :gap="4" align="center" v-else>
      <plus-outlined />创建/加入组织
    </a-flex>
    <a-modal v-model:open="open" :footer="false" :width="800" :body-style="{paddingTop:'12px'}">
      <a-row class="org-wrapper" :gutter="48">
        <a-col :span="15">
          <a-tabs size="large" v-model:active-key="active" @change="tabChange">
            <a-tab-pane :key="0" tab="全部组织"/>
            <a-tab-pane :key="1" tab="我创建的"/>
            <a-tab-pane :key="2" tab="我加入的"/>
            <template #rightExtra>
              <a-tooltip title="刷新">
                <a-button type="text" class="icon-only" @click="reloadData"><reload-outlined/></a-button>
              </a-tooltip>
            </template>
          </a-tabs>
          <div class="org-list mini-scrollbar" v-if="orgStore.list.length">
            <template v-for="item in orgStore.list" >
              <div :class="['org-list-item',item.id=== orgStore.data?.id ?'org-list-item-selected':'']"
                   @click="onClick(item)">
                <a-flex justify="space-between" align="center">
                  <a-space>
                    <a-avatar shape="square" :src="item.avatar" v-if="item.avatar"/>
                    <a-avatar shape="square" v-else>{{item.name.slice(2,3)}}</a-avatar>
                    <div class="org-list-item-title">{{item.name}}</div>
                  </a-space>
                  <a-tooltip title="点击进入">
                    <a-button type="text" class="icon-only" shape="circle">
                      <check-outlined v-if="orgStore.data?.id === item.id"/>
                      <arrow-right-outlined v-else/>
                    </a-button>
                  </a-tooltip>
                </a-flex>
              </div>
            </template>
          </div>
          <a-empty :image="simpleImage" v-else>
            <template #description>
              <div>还没有组织，请创建或是加入一个组织</div>
            </template>
          </a-empty>
        </a-col>
        <a-col :span="9" class="border-left padding-top">
          <a-flex vertical justify="space-between">
            <div class="title">我的组织与团队</div>
            <img src="@/assets/image/together.svg" class="width-max" alt="">
            <div class="padding">
              <org-create class="margin-bottom padding-top"/>
              <org-join/>
            </div>
          </a-flex>
        </a-col>
      </a-row>
    </a-modal>
  </div>
</template>

<script setup lang="ts">
import {onMounted, ref} from "vue";
import {useOrgStore} from "@/store/modules/organization";
import {ArrowRightOutlined,ReloadOutlined,CheckOutlined,PlusOutlined,TeamOutlined} from "@ant-design/icons-vue";
import OrgCreate from "@/components/organization/OrgCreate.vue";
import OrgJoin from "@/components/organization/OrgJoin.vue";
import {message} from "ant-design-vue";
import {useRouter} from "vue-router";
import { Empty } from 'ant-design-vue';
import UpDownOutlined from "@/components/icon/UpDownOutlined.vue";
const simpleImage = Empty.PRESENTED_IMAGE_SIMPLE;


const router = useRouter()
const open = ref<boolean>(false)
const active = ref<number>(0)
const organization = ref<OrganizationItem[]>([])
const orgStore = useOrgStore()
onMounted(()=>{
  orgStore.getList()
  organization.value = orgStore.list
})
const reloadData = async ()=>{
  await orgStore.getList(true)
}
const tabChange = (key:number)=>{
  if (key === 1){
    organization.value = orgStore.list.filter(item=>item.role_id === 1)
  }else if (key === 2){
    organization.value = orgStore.list.filter(item=>item.role_id !== 1)
  }else {
    organization.value = orgStore.list
  }
}
const onClick = (item:OrganizationItem) => {
  const load = message.loading('正在切换组织...',0)
  setTimeout(load,500)
  setTimeout(()=> {
    message.success('切换组织成功')
    router.replace({query:{org:item.id}})
    setTimeout(()=>open.value = false,500)
  },500)
  orgStore.setCurrentData(item)
}
onMounted(()=>{
  if(!orgStore.data?.id){
    message.info('请选择一个组织或是创建新的组织')
    open.value = true
  }
})
</script>

<style scoped>
.org-wrapper .title{
  font-size: 22px;
  padding: var(--space) 0;
  font-weight: 600;
  text-align: center;
}
.org-list{
  height: calc(62px * 5);
  overflow-y: auto;
}
.org-list-item{
  padding: 10px;
  border:1px solid #f0f0f0;
  border-radius: var(--radius);
}
.org-list .org-list-item+.org-list-item{
  margin-top: 8px;
}
.org-list-item-selected{
  border-color: var(--color-primary);
  color: var(--color-primary);
  background-color: var(--color-selected);
}
.org-list-item:hover{
  border-color: var(--color-primary);
  color: var(--color-primary);
  transition: var(--transition);
  cursor: pointer;
}
.org-list-item-title{
  font-size: 16px;
  flex-wrap: nowrap;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.org-plus-icon{
  background:linear-gradient(135deg, #288BFF, #D065FF);
  color: rgb(255, 255, 255);
  display: inline-block;
  height: 20px;
  width: 20px;
  font-size: 12px;
  text-align: center;
  border-radius: 20px;
  line-height: 18px;
  margin-right: 4px;
}
.organization-selector{
  height: 28px;
  display: flex;
  padding: 0 8px;
  border-radius: var(--radius-md);
}
.organization-selector:hover{
  cursor: pointer;
  background: var(--color-active);
  transition: var(--transition);
}
.organization-selector .anticon{
  color: var(--color-gray);
}
.organization-name{
  max-width: 7em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>